<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Punch-Clock</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<style type="text/css">
    .layui-layout-admin .layui-side, .layui-layout-admin .layui-body {
        top: 0px;
    }
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed ">
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="/html/attendance.html" target="iframeMain">打卡明细</a></dd>
                        <dd><a href="/html/sumup.html" target="iframeMain">考勤统计</a></dd>
                        <dd><a href="/html/department.html" target="iframeMain">部门汇总</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" height="100%">
        <div style="padding:20px;height: calc(100% - 44px);">
            <!-- 内容主体区域 -->
            <iframe id="iframeMain" src="/html/attendance.html" name="iframeMain" frameborder="no" border="0"
                    marginwidth="0" marginheight="0"
                    scrolling="no" allowtransparency="yes" width="100%" height="100%"></iframe>
        </div>
    </div>
</div>
<script src="lib/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
</body>

</html>